<template>
    <div class="searchbar-wrapper" :style="{ backgroundColor: outerBg }">
        <div :style="{ backgroundColor: interBg }" :class="{ 'no-border': !hasBorder }">
            <img :src="searchIcon" alt="">
            <span>想吃什么搜这里，如川菜</span>
        </div>
    </div>
</template>

<script setup>
import searchIcon from "@/assets/images/search.png";
import { defineProps } from "vue";

const props = defineProps(['outerBg', 'interBg', 'hasBorder'])
</script>

<style lang="scss" scoped>
@import '@/assets/border.scss';

.searchbar-wrapper {
    padding: 10px 15px;
    // background-color: #f5f5f5;

    div {
        width: 100%;
        height: 40px;
        // background-color: white;
        border-radius: 5px;
        // border: solid 1px #ED742E;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &.no-border {
            border: none;
        }

        @include border(1px, #ED742E, solid, 5px); // 边框

        // &::after {
        //     content: '';
        //     position: absolute;
        //     top: 0;
        //     left: 0;
        //     bottom: 0;
        //     right: 0;
        //     border: solid 1px #ED742E;
        //     z-index: 999;
        //     border-radius: 5px;

        //     width: 200%;
        //     height: 200%;
        //     transform: scale(0.5);
        //     transform-origin: 0 0;
        // }

        img {
            width: 20px;
            height: 20px;
            margin: 10px;
        }

        span {
            font-size: 14px;
            color: #ccc;
        }
    }
}
</style>